<template>
  <div class="login">
    <div class="backgrounds">
      <div @click.stop="CancelLogin" class="nav">
        <div class="nav-inners">
          <ul class="nav-menu clearfix">
            <li style="display: inline-flex">
              <img style="width: 48px; height: 48px; margin-top: 8px" src="../assets/logo/logo.png" alt="" />
              <a href=""> 成都市政务云监管平台</a>
            </li>
            <li @click="Jump('Notification')">
              <a href="/#/Notification">官网公告</a>
            </li>
            <li @click="Jump('help')">
              <a href="/#/help">帮助与支持</a>
            </li>
            <li @click="Jump('ResourceCalculator')">
              <a>资源计算器</a>
            </li>
            <!-- <li>
                            <a href="">文件管理</a>
                        </li>
                        <li>
                            <a href="">帮助和支持</a>
                        </li>
                        <li>
                            <a href="">资源计算器</a>
                        </li> -->
          </ul>
          <ul class="nav-login clearfix">
            <li @click.stop="chengeState">
              <div class="home-button">登录</div>
            </li>
          </ul>
        </div>
      </div>
      <div @click.stop="CancelLogin" class="carousel-inners">
        <div class="box">
          <img src="../assets/icons/banner.jpg" alt="" />
        </div>
        <div @click.stop="CancelLogin" class="home-service">
          <div class="service_bg">
            <h1 style="
                margin-top: 70px;
                font-size: 32px;
                letter-spacing: 5px;
                position: relative;
              ">
              成都市统一监管 态势实时尽览
            </h1>
            <h3 style="
                font-size: 16px;
                margin-top: 30px;
                margin-bottom: 90px;
                color: rgba(255, 255, 255, 1);
              ">
              依据政务云的统筹规划，构建面向全市的政务云统一监管、统一调度和弹性调度的云计算服务体系；强化管理，保障安全。
            </h3>
            <ul class="clearfix service-content">
              <li>
                <div>
                  <img src="../assets/icons/cloud.png" alt="" />
                  <p>
                    <span>3</span>
                    个
                  </p>
                  <p>已对接云平台</p>
                </div>
              </li>
              <li>
                <div>
                  <img src="../assets/icons/product.png" alt="" />
                  <p>
                    <span>20</span>
                    +
                  </p>
                  <p>服务产品</p>
                </div>
              </li>
              <li>
                <div>
                  <img src="../assets/icons/24hour.png" alt="" />
                  <p>
                    <span>7*24</span>
                    小时
                  </p>
                  <p>提供服务</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="map-box" v-if="false"></div>
        </div>
        <!-- <h1 class="footer-header">
          云监管平台持续监管政务云
          <span>{{ day }}</span>
            天
        </h1> -->
      </div>
      <div style="background: white">
        <div @click.stop="CancelLogin" class="home-center clearfix">
          <ul class="home-news">
            <el-carousel height="60px" direction="vertical" :interval="3000" :autoplay="true">
              <el-carousel-item v-for="(item, index) in notice" :key="index" style="
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                ">
                <img style="width: 22px; height: 22px; vertical-align: middle" src="../assets/icons/xiaoxi2.png" alt="" />
                <span @click="Jump(item)" class="medium" style="
                    margin-left: 10px;
                    cursor: pointer;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  ">【普通公告】[{{ item.createTime.substring(0, 10) }}]
                  {{ item.noticeTitle }}</span>
              </el-carousel-item>
            </el-carousel>
            <!-- <a href="#" style="color:#000">
                        <img style="width: 22px;height: 22px;vertical-align: middle;" src="../assets/icons/xiaoxi.png" alt="">
                        <span style="margin-left: 10px;">[2021-04-01]测试消息通告</span>

                    </a> -->
          </ul>
          <ul class="home-news">
            <el-carousel height="60px" direction="vertical" :interval="3000" :autoplay="true">
              <el-carousel-item style="
                  cursor: pointer;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                " v-for="(item, index) in Notice" :key="index">
                <img style="width: 22px; height: 22px; vertical-align: middle" src="../assets/icons/jiingao2.png" alt="" />
                <span @click="Jump(item)" class="medium" style="
                    margin-left: 10px;
                    cursor: pointer;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  ">【安全情报】[{{ item.createTime.substring(0, 10) }}]
                  {{ item.noticeTitle }}</span>
              </el-carousel-item>
            </el-carousel>
            <!-- <a href="#" style="color:#000">
                        <img style="width: 22px;height: 22px;vertical-align: middle;" src="../assets/icons/jiingao.png" alt="">
                        <span style="margin-left: 10px;">[2021-04-01]测试警告通知</span>
                    </a> -->
          </ul>
        </div>
      </div>
      <div @click.stop="CancelLogin" class="home-products">
        <h1 class="text-center">安全、稳定的云服务</h1>
        <h3 style="
            font-size: 16px;
            margin: 0 0 30px 0;
            margin-bottom: 80px;
            text-align: center;
            color: #949494;
          ">
          打造安全可靠、稳定高效的云计算产品和服务
        </h3>

        <div class="product-service-title-content ace-view-center">
          <div v-for="(item, index) in product" :key="index" class="product-service-title-item" @click="productServiceTitleState = index">
            <div class="active product-service-title">
              <!-- <div class="title-img" style="
                                    background-image: url('https://img.alicdn.com/tfs/TB1SwmqiODsXe8jSZR0XXXK6FXa-128-2688.png');
                                    background-position-y: 0px;
                                "></div> -->
              <h3 class="title-desc" :style="{
                  color: productServiceTitleState == index ? '#25a4f5' : '',
                }">
                {{ item.name }}
              </h3>
                <div class="title-content-underLine" :style="
                  productServiceTitleState == index
                    ? 'transform: scaleX(1);'
                    : 'transform: scaleX(0);'
                "></div>
            </div>
          </div>
          <!--  <div class="product-service-title-item">
            <div class="active product-service-title" @click="productServiceTitleState = 1">
              <div class="title-img" style="
                                    background-image: url('https://img.alicdn.com/tfs/TB1C7fPidTfau8jSZFwXXX1mVXa-128-2688.png');
                                    background-position-y: 0px;
                                "></div>
              <h3 class="title-desc">云存储</h3>
              <div class="title-content-underLine" :style="
                                    productServiceTitleState == 1
                                        ? 'transform: scaleX(1);'
                                        : 'transform: scaleX(0);'
                                "></div>
            </div>
          </div>
          <div class="product-service-title-item">
            <div class="active product-service-title" @click="productServiceTitleState = 2">
              <div class="title-img" style="
                                    background-image: url('https://img.alicdn.com/imgextra/i1/19999999999999/O1CN01kEo6502NjasxGsHnS_!!19999999999999-2-tps.png');
                                    background-position-y: 0px;
                                "></div>
              <h3 class="title-desc">数据库</h3>
              <div class="title-content-underLine" :style="
                                    productServiceTitleState == 2
                                        ? 'transform: scaleX(1);'
                                        : 'transform: scaleX(0);'
                                "></div>
            </div>
          </div>
          <div class="product-service-title-item">
            <div class="active product-service-title" @click="productServiceTitleState = 3">
              <div class="title-img" style="
                                    background-image: url('https://img.alicdn.com/imgextra/i1/19999999999999/O1CN01wTY5Zt2Njasyydqim_!!19999999999999-2-tps.png');
                                    background-position-y: 0px;
                                "></div>
              <h3 class="title-desc">安全产品</h3>
              <div class="title-content-underLine" :style="
                                    productServiceTitleState == 3
                                        ? 'transform: scaleX(1);'
                                        : 'transform: scaleX(0);'
                                "></div>
            </div>
          </div> -->
        </div>
        <div class="product-wrap" :style="{
            paddingTop: productServiceTitleState == 2 ? '0px' : '40px',
          }">
          <div class="product-center">
            <div class="wrap">
              <div v-for="(item, index) in product[productServiceTitleState]
                  .children" :key="index" class="item">
                <div v-if="productServiceTitleState < 2">
                  <div :class="
                      productServiceTitleState2 == index ? 'name' : 'name2'
                    ">
                    <span @click="productServiceTitleState2 = index">{{
                      item.name
                    }}</span>
                  </div>
                  <div class="remark" v-if="
                      productServiceTitleState < 2 &&
                      productServiceTitleState2 == index
                    ">
                    {{ item.remark }}
                  </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- productServiceTitleState3==index?'item': -->
            <div class="product-bottom">
              <div class="wrap">
                <div slot="reference" :class="productServiceTitleState3 == index ? 'item' : 'item2'" v-for="(item, index) in productServiceTitleState == 2
                  ? product[productServiceTitleState].children
                  : product[productServiceTitleState].children[
                      productServiceTitleState2
                    ].children" @mouseover="productServiceTitleState3 = index" @mouseout="productServiceTitleState3 = -1" :key="index">
                  <img v-if="productServiceTitleState3 != index && item.img" :src="item.img" />

                  <div style="font-size: 18px; font-weight: bold">
                    {{ item.name }}
                </div>
                    <div class="remark" :style="{
                    marginBottom:
                      productServiceTitleState3 != index ? '30px' : '0px',
                  }">
                      {{ item.remark }}
                </div>
                      <div class="detail" v-show="productServiceTitleState3 == index">
                        {{ item.power }}
                </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div v-if="false" class="product-service-container">
                  <div class="slide-out product-service-content ace-view-center">
                    <div class="ace-row ace-row-wrap">
                      <div class="ace-col ace-col-6">
                        <div class="action-card">
                          <div class="action-card-title">
                            <div class="card-title">云服务器 ESC</div>
                            <div class="card-tips">稳定可靠</div>
                          </div>
                          <div class="action-card-desc-content">
                            <div class="action-card-desc" style="max-width: 333px">
                              弹性可伸缩的计算服务，降本增效
                            </div>
                          </div>
                        </div>
                        <div class="action-card">
                          <div class="action-card-title">
                            <div class="card-title">轻量应用服务器</div>
                            <div class="card-tips">易于管理</div>
                          </div>
                          <div class="action-card-desc-content">
                            <div class="action-card-desc" style="max-width: 333px">
                              可快速搭建的轻量级云服务器
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="ace-col ace-col-18">
                        <div class="ace-col-8">
                          <div class="static-card">
                            <div class="static-card-title">
                              <div class="card-title">GPU 云服务器</div>
                              <div class="card-tips">超强计算性能</div>
                            </div>
                            <div class="static-card-desc-content">
                              <div class="static-card-desc">基于GPU应用的计算服务</div>
                            </div>
                            <div class="static-card-tips-content">
                              <div class="static-card-tips">人工智能</div>
                              <div class="static-card-tips">图形图像</div>
                            </div>
                          </div>
                        </div>
                        <div class="ace-col-8">
                          <div class="static-card">
                            <div class="static-card-title">
                              <div class="card-title">弹性高性能服务器（神龙）</div>
                              <div class="card-tips">分钟级交付</div>
                            </div>
                            <div class="static-card-desc-content">
                              <div class="static-card-desc">
                                可弹性伸缩的高性能计算服务
                              </div>
                            </div>
                            <div class="static-card-tips-content">
                              <div class="static-card-tips">弹性伸缩</div>
                              <div class="static-card-tips">实时响应</div>
                            </div>
                          </div>
                        </div>
                        <div class="ace-col-8">
                          <div class="static-card">
                            <div class="static-card-title">
                              <div class="card-title">弹性云桌面</div>
                              <div class="card-tips">安全办公</div>
                            </div>
                            <div class="static-card-desc-content">
                              <div class="static-card-desc">
                                易用、安全、高效的云上桌面服务
                              </div>
                            </div>
                            <div class="static-card-tips-content">
                              <div class="static-card-tips">弹性灵活</div>
                              <div class="static-card-tips">远程接入</div>
                              <div class="static-card-tips">简化运维</div>
                            </div>
                          </div>
                        </div>
                        <div class="ace-col-8">
                          <div class="static-card" style="margin-top: 32px">
                            <div class="static-card-title">
                              <div class="card-title">超级计算集群</div>
                              <!-- <div class="card-tips">超强计算性能</div> -->
                            </div>
                            <div class="static-card-desc-content">
                              <div class="static-card-desc">
                                提供极致计算性能和并行效率的计算集群服务
                              </div>
                            </div>
                            <div class="static-card-tips-content">
                              <div class="static-card-tips">异构加速</div>
                              <div class="static-card-tips">高性能计算</div>
                              <div class="static-card-tips">机器学习</div>
                            </div>
                          </div>
                        </div>
                        <div class="ace-col-8">
                          <div class="static-card" style="margin-top: 32px">
                            <div class="static-card-title">
                              <div class="card-title">弹性容器实例 ECI</div>
                              <!-- <div class="card-tips">超强计算性能</div> -->
                            </div>
                            <div class="static-card-desc-content">
                              <div class="static-card-desc">
                                Serverless和容器化的弹性计算服务，无需管理底层服务器，仅提供打包好的镜像，即可运行
                              </div>
                            </div>
                            <div class="static-card-tips-content">
                              <div class="static-card-tips">无服务器容器</div>
                              <div class="static-card-tips">服务集成</div>
                              <div class="static-card-tips">按需计费</div>
                            </div>
                          </div>
                        </div>
                        <div class="ace-col-8">
                          <div class="static-card" style="margin-top: 32px">
                            <div class="static-card-title">
                              <div class="card-title">GPU 云服务器</div>
                              <div class="card-tips">超强计算性能</div>
                            </div>
                            <div class="static-card-desc-content">
                              <div class="static-card-desc">基于GPU应用的计算服务</div>
                            </div>
                            <div class="static-card-tips-content">
                              <div class="static-card-tips">人工智能</div>
                              <div class="static-card-tips">图形图像</div>
                            </div>
                          </div>
                        </div>
                        <div class="ace-col-8">
                          <div class="static-card" style="margin-top: 32px">
                            <div class="static-card-title">
                              <div class="card-title">GPU 云服务器</div>
                              <div class="card-tips">超强计算性能</div>
                            </div>
                            <div class="static-card-desc-content">
                              <div class="static-card-desc">基于GPU应用的计算服务</div>
                            </div>
                            <div class="static-card-tips-content">
                              <div class="static-card-tips">人工智能</div>
                              <div class="static-card-tips">图形图像</div>
                            </div>
                          </div>
                        </div>
                        <div class="ace-col-8">
                          <div class="static-card" style="margin-top: 32px">
                            <div class="static-card-title">
                              <div class="card-title">GPU 云服务器</div>
                              <div class="card-tips">超强计算性能</div>
                            </div>
                            <div class="static-card-desc-content">
                              <div class="static-card-desc">基于GPU应用的计算服务</div>
                            </div>
                            <div class="static-card-tips-content">
                              <div class="static-card-tips">人工智能</div>
                              <div class="static-card-tips">图形图像</div>
                            </div>
                          </div>
                        </div>
                        <div class="ace-col-8">
                          <div class="static-card" style="margin-top: 32px">
                            <div class="static-card-title">
                              <div class="card-title">GPU 云服务器</div>
                              <div class="card-tips">超强计算性能</div>
                            </div>
                            <div class="static-card-desc-content">
                              <div class="static-card-desc">基于GPU应用的计算服务</div>
                            </div>
                            <div class="static-card-tips-content">
                              <div class="static-card-tips">人工智能</div>
                              <div class="static-card-tips">图形图像</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div @click.stop="CancelLogin" class="home-footer">
                <div class="clearfix">
                  <ul class="footer-content">
                    <li>普通公告</li>
                    <template v-for="(item, index) in notice.length > 3
                ? notice.slice(0, 3)
                : notice">
                      <li @click="Jump(item)" :key="index">
                        [{{ item.createTime }}] {{ item.noticeTitle }}
              </li>
                    </template>
                  </ul>
                  <ul class="footer-content">
                    <li>安全情报</li>
                    <template v-for="(item, index) in Notice.length > 3
                ? Notice.slice(0, 3)
                : Notice">
                      <li @click="Jump(item)" :key="index">
                        [{{ item.createTime }}] {{ item.noticeTitle }}
              </li>
                    </template>
                  </ul>
                  <ul class="footer-content">
                    <li>联系我们</li>
                    <!-- <li style="color: rgba(203, 201, 195, 0.78)">
              曙光云、浪潮云、新华三云：16608036356
            </li>
            <li style="color: rgba(203, 201, 195, 0.78)">
              灾备云：16608036356
            </li> -->
                    <li style="color: rgba(203, 201, 195, 0.78)">
                      24小时值班电话：16608036356
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="suspension" :style="LoginStatus ? 'right: 0px;' : 'right: -800px;'">
              <el-row class="el-suspension" style="
          margin-top: calc(50% - 161px);
          height: 322px;
          width: 700px;
          margin-left: 50px;
        ">
                <el-col :span="12">
                  <div class="BackgroundImg"></div>
                </el-col>
                <el-col :span="12" style="padding: 25px 25px 5px 25px">
                  <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
                    <h3 class="title">成都市政务云</h3>
                    <el-form-item prop="username">
                      <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                        <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                      </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                      <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
                        <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                      </el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                      <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
                        <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                      </el-input>
                      <div class="login-code">
                        <img :src="codeUrl" @click="getCode" class="login-code-img" />
                      </div>
                    </el-form-item>
                    <el-form-item style="width: 100%">
                      <el-button :loading="loading" size="medium" type="primary" style="width: 100%" @click.native.prevent="handleLogin">
                        <span v-if="!loading">登 录</span>
                        <span v-else>登 录 中...</span>
                      </el-button>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </div>
            <!--  底部  -->
            <!-- <div class="el-login-footer">
        </div> -->
          </div>
</template>

<script>
  import {
    getCodeImg
  } from "@/api/login";
  import Cookies from "js-cookie";
  import {
    encrypt,
    decrypt
  } from "@/utils/jsencrypt";
  import {
    treeselect
  } from "@/api/system/dept";
  import {
    getDicts
  } from "@/api/system/dict/data";
  import {
    listByCode,
    serviceByClazz
  } from "@/api/resources/apply";
  import {
    helpList,
    noticeList
  } from "@/api/system/user";
  import {
    getRouters
  } from "@/api/menu.js";
  import axios from "axios";
  import {
    MessageBox
  } from "element-ui";
  export default {
    name: "Login",
    data() {
      return {
        day: 0,
        product: [{
          name: "非信创资源池",
          children: [{
            name: "计算资源池",
            remark: "安全可靠、高效稳定的计算资源池",
            children: [{
              name: "云主机",
              remark: "弹性扩展、快速部署、高可用、稳定",
              power: "云服务器（Cloud Virtual Machine，CVM）提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源，适应变化的业务需求，并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本，简化 IT 运维工作。",
              img: require("../assets/login/1.png"),
            },
            {
              name: "高性能服务器",
              remark: "高速的CPU运算能力、长时间的可靠运行、强大的I/O外部数据吞吐能力以及更好的扩展性",
              power: "高性能服务器（ECS Bare Metal Server）是一种可弹性伸缩的高性能计算服务，计算性能与传统物理机无差别，具有安全物理隔离的特点。分钟级的交付周期将提供给您实时的业务响应能力，助力您的核心业务飞速成长。",
              img: require("../assets/login/2.png"),
            },
            {
              name: "GPU服务器",
              remark: "视频编解码、深度学习、科学计算",
              power: "GPU服务器（GPU Computing，GPU）是提供 GPU 算力的弹性计算服务，具有超强的并行计算能力，作为 IaaS 层的尖兵利器，服务于深度学习训练、科学计算、图形图像处理、视频编解码等场景。",
              img: require("../assets/login/3.png"),
            }, ],
          },
          {
            name: "存储资源池",
            remark: "安全可靠、高效稳定的存储资源池",
            children: [{
              name: "云存储",
              remark: "稳定可靠、低延迟、可扩展的持久性存储设备",
              power: "可根据业务需求，为云主机提供各种性能和容量的存储资源，支持创建、挂载、删除和快照等操作。可以自由配置存储容量，按需扩容，且无须中断业务",
              img: require("../assets/login/4.png"),
            }, ],
          },
          {
            name: "网络资源池",
            remark: "安全可靠、高可用的网络资源池",
            children: [{
              name: "应用负载均衡",
              remark: "增加吞吐量、加强网络数据处理能力、提高网络灵活性",
              power: "负载均衡通过对多台云服务器进行均衡的流量分发调度，消除单点故障提升应用系统的可靠性与吞吐力。",
              img: require("../assets/login/5.png"),
            }, ],
          },
          {
            name: "安全资源池",
            remark: "全方位、高保障的安全资源池",
            children: [{
              name: "虚拟Web防火墙",
              remark: "基于云模式的Web防火墙，增强应用可用性和安全性",
              power: "应用防火墙（Web Application Firewall，WAF）帮助用户应对 Web 攻击、入侵、漏洞利用、挂马、篡改、后门、爬虫、域名劫持等网站及 Web 业务安全防护问题。为组织网站及 Web 业务安全运营保驾护航。",
              img: require("../assets/login/18.png"),
            },
            {
              name: "虚拟防火墙",
              remark: "基于云模式独立的系统资源、管理员、安全策略、用户认证",
              power: "通过旁路部署方式，无变更无侵入地对网络4层会话进行实时阻断，并提供了阻断 API，方便其他安全检测类产品调用",
              img: require("../assets/login/6.png"),
            },
            {
              name: "虚拟入侵防御",
              remark: "基于云模式能监控网络、及时中断、调整或隔离具有危害性的行为",
              power: "网络入侵防护系统提供的全量网络日志存储和检索、安全告警、可视化大屏等功能，帮助客户解决等保合规、日志审计、行政监管、以及云平台管控等问题。",
              img: require("../assets/login/7.png"),
            },
            {
              name: "防病毒",
              remark: "主动防止病毒入侵，从而避免用户资料泄露、设备程序被破坏",
              power: "计算机病毒的预防是通过阻止计算机病毒进入系统内存或阻止计算机病毒对磁盘的操作，尤其是写操作。预防病毒技术包括：磁盘引导区保护、加密可执行程序、读写控制技术、系统监控技术",
              img: require("../assets/login/8.png"),
            },
            {
              name: "日志审计",
              remark: "集中化统一管理日志，实时监控告警",
              power: "收集安全设备、网络设备、数据库、服务器、应用系统、主机等设备所产生的日志（包括运行、告警、操作、消息、状态等）并进行存储、监控、审计、分析、报警、响应和报告",
              img: require("../assets/login/9.png"),
            },
            {
              name: "数据库审计",



              remark: "对数据库操作进行细粒度审计的合规性管理，对数据库遭受到的风险行为进行实时告警",
              power: "数据库审计（简称DBAudit）以安全事件为中心，以全面审计和精确审计为基础，实时记录网络上的数据库活动，对数据库操作进行细粒度审计的合规性管理，对数据库遭受到的风险行为进行实时告警。",
              img: require("../assets/login/10.png"),
            },
            {
              name: "云上资源安全运维网关",
              remark: "云上资源安全运维网关",
              power: "基于云模式监控和记录运维人员对服务器设备的操作行为，具备权限分离及审计定责",
              img: require("../assets/login/11.png"),
            }, ],
          }, ],
        },
        {
          name: "信创资源池",
          children: [{
            name: "计算资源池",
            remark: "安全可靠、高效稳定的计算资源池",
            children: [{
              name: "信创云主机",
              remark: "基于国产化的弹性扩展、快速部署、高可用、稳定",
              power: "基于国产化的基础设施提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源，适应变化的业务需求，并只需按实际使用的资源计费。",
              img: require("../assets/login/1.png"),
            },
            {
              name: "信创高性能服务器",
              remark: "基于国产化的高速的CPU运算能力、长时间的可靠运行、强大的I/O外部数据吞吐能力以及更好的扩展性",
              power: "基于国产化的高性能计算服务，计算性能与传统物理机无差别，具有安全物理隔离的特点。分钟级的交付周期将提供给您实时的业务响应能力，助力您的核心业务飞速成长。",
              img: require("../assets/login/2.png"),
            },
            {
              name: "信创GPU服务",
              remark: "基于国产化的视频编解码、深度学习、科学计算",
              power: "基于国产化的算力计算服务，具有超强的并行计算能力，作为 IaaS 层的尖兵利器，服务于深度学习训练、科学计算、图形图像处理、视频编解码等场景。",
              img: require("../assets/login/3.png"),
            }, ],
          },
          {
            name: "存储资源池",
            remark: "安全可靠、高效稳定的存储资源池",
            children: [{
              name: "信创云存储",
              remark: "基于国产化的稳定可靠、低延迟、可扩展的持久性存储设备",
              power: "基于国产化的的存储资源，支持创建、挂载、删除和快照等操作。可以自由配置存储容量，按需扩容，且无须中断业务",
              img: require("../assets/login/4.png"),
            }, ],
          },
          {
            name: "网络资源池",
            remark: "安全可靠、高可用的网络资源池",
            children: [{
              name: "信创应用负载均衡",
              remark: "基于国产化的增加吞吐量、加强网络数据处理能力、提高网络灵活性",
              power: "基于国产化的负载均衡通过对多台云服务器进行均衡的流量分发调度，消除单点故障提升应用系统的可靠性与吞吐力。",
              img: require("../assets/login/5.png"),
            }, ],
          }, ],
        },
        {
          name: "PaaS服务",
          children: [{
              name: "容器服务",
              remark: "轻量、版本控制、可移植性、标准化、安全",
              power: "容器服务即Cloud Container Service，是高度可扩展的高性能容器管理服务",
              img: require("../assets/login/12.png"),
            },
            {
              name: "消息队列中间件",
              remark: "减少响应所需的时间和削峰、降低系统耦合性（解耦或提升系统的可拓展性）",
              power: "消息队列中间件是系统中的重要组件，逐渐成为系统内部通信的核心手段。它具有松耦合、异步消息、流量削峰、可靠投递、广播、流量控制、最终一致性等一系列功能。",
              img: require("../assets/login/13.png"),
            },
            {
              name: "微服务",
              remark: "部署成本低、改动影响小，风险低、部署频率高",
              power: "微服务是一种用于构建应用的架构方案。微服务架构有别于更为传统的单体式方案，可将应用拆分成多个核心功能。每个功能都被称为一项服务，可以单独构建和部署",
              img: require("../assets/login/14.png"),
            },
            {
              name: "API网关服务",
              remark: "API网关是一个服务器，是系统的唯一入口。",
              power: "应用系统如果需要被其他系统调用，就需要暴露 API，这些 API 代表着一个一个的功能点。如果两个系统中间通信，在系统之间加上一个中介者协助 API 的调用，这个中介者就是 API 网关",
              img: require("../assets/login/15.png"),
            },
            {
              name: "关系型云数据库",
              remark: "采用了关系模型来组织数据的数据库",
              power: "以行和列的形式存储数据，关系型数据库这一系列的行和列被称为表，一组表组成了数据库。用户通过查询来检索数据库中的数据，而查询是一个用于限定数据库中某些区域的执行代码。关系模型可以简单理解为二维表格模型，而一个关系型数据库就是由二维表及其之间的关系组成的一个数据组织。",
              img: require("../assets/login/16.png"),
            },
            // {
            //   name:'关系型云数据库（高可用版）',
            //   remark:'2',power:'',
            //   img:require( '../assets/login/16.png')
            // },
            {
              name: "NoSQL云数据库",
              remark: "解决大规模数据集合多重数据种类",
              power: "NoSQL数据库种类繁多，数据之间无关系，这样就非常容易扩展。无形之间也在架构的层面上带来了可扩展的能力。大数据量，高性能，NoSQL数据库都具有非常高的读写性能，尤其在大数据量下，同样表现优秀。这得益于它的无关系性，数据库的结构简单。",
              img: require("../assets/login/16.png"),
            },
            // {
            //   name:'NoSQL云数据库（高可用版）',
            //   remark:'2',power:'',
            //   img:require( '../assets/login/16.png')
            // },
            {
              name: "统一日志服务",
              remark: "一站式日志数据解决方案",
              power: "从日志采集、日志存储到日志检索，图表分析、监控告警、日志投递等多项服务，协助用户通过日志来解决业务运维、服务监控、日志审计等场景问题。",
              img: require("../assets/login/17.png"),
            },
          ],
        }, ],
        productServiceTitleState: 0,
        productServiceTitleState2: 0,
        productServiceTitleState3: -1,
        LoginStatus: false,
        visible: true,
        codeUrl: "",
        cookiePassword: "",
        loginForm: {
          username: "", //test_cloud_manage
          password: "",
          rememberMe: false,
          code: "",
          uuid: "",
        },
        loginRules: {
          username: [{
            required: true,
            trigger: "blur",
            message: "用户名不能为空",
          }, ],
          password: [{
            required: true,
            trigger: "blur",
            message: "密码不能为空",
          }, ],
          code: [{
            required: true,
            trigger: "change",
            message: "验证码不能为空",
          }, ],
        },
        loading: false,
        redirect: undefined,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          noticeType: 1,
        },
        notice: [],
        Notice: [],
        base_url: process.env.VUE_APP_BASE_API,
        list: [],
      };
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true,
      },
      productServiceTitleState() {
        this.productServiceTitleState2 = 0;
      },
    },
    created() {
      setTimeout(() => {
        MessageBox.close();
      }, 10);
      this.GetOpennoticemylist();
      this.getCode();
      this.getCookie();
      // this.helpList();
      let a = new Date().getTime(),
        b = new Date("2019-01-01").getTime();
      this.day = parseInt((a - b) / 86400000);
    },
    methods: {
      helpList() {
        helpList({
          fileType: "工具上传",
          pageNum: 1,
          pageSize: 100000,
        }).then((res) => {
          if (res.success) {
            this.list = res.rows;
          }
        });
      },

      CancelLogin() {
        if (this.LoginStatus == true) {
          this.LoginStatus = false;
        }
      },
      Jump(item) {
        if (item.noticeId) {
          this.$router
            .push({
              path: "/Notification",
              query: {
                id: item.noticeId,
              },
            })
            .catch((err) => {});
        } else {
          let Path = "/" + item;
          this.$router
            .push({
              path: Path,
            })
            .catch((err) => {});
        }
      },
      GetOpennoticemylist() {
        noticeList({
          pageNum: 1,
          pageSize: 5,
          noticeType: 1,
        }).then((response) => {
          this.notice = response.rows;
        });
        noticeList({
          pageNum: 1,
          pageSize: 5,
          noticeType: 2,
        }).then((response) => {
          this.Notice = response.rows;
        });
      },
      chengeState() {
        this.LoginStatus = !this.LoginStatus;
      },
      getCode() {
        getCodeImg().then((res) => {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        });
      },
      getCookie() {
        const username = Cookies.get("username");
        const password = Cookies.get("password");
        const rememberMe = Cookies.get("rememberMe");
        this.loginForm = {
          username: username === undefined ? this.loginForm.username : username,
          password: password === undefined ? this.loginForm.password : decrypt(password),
          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
        };
      },
      handleLogin() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loading = true;
            if (this.loginForm.rememberMe) {
              Cookies.set("username", this.loginForm.username, {
                expires: 30,
              });
              Cookies.set("password", encrypt(this.loginForm.password), {
                expires: 30,
              });
              Cookies.set("rememberMe", this.loginForm.rememberMe, {
                expires: 30,
              });
            } else {
              Cookies.remove("username");
              Cookies.remove("password");
              Cookies.remove("rememberMe");
            }
            var loginForm;
            loginForm = JSON.parse(JSON.stringify(this.loginForm));
            const Base64 = require("js-base64").Base64;
            var secret = ".m9xVBmvdvhiTO";
            let password = loginForm.password + secret;
            let r = Base64.encode(password);
            loginForm.password = Base64.encode(r);
            this.$store.dispatch("IsInsideFunction", true);
            this.$store
              .dispatch("Login", loginForm)
              .then((res) => {
                this.$router.push({
                  path: this.redirect || "/",
                });
                // getRouters().then(resp => {
                //   if (resp.success) {
                //     let url = resp.data[0].path
                //     if (resp.data[0].children.length) {
                //       url = url + '/' + resp.data[0].children[0].path
                //     }
                //     this.$router.push({
                //       path: url || "/"
                //     });
                //   } else {
                //     this.$router.push({
                //       path: this.redirect || "/"
                //     });
                //   }
                // }).catch(() => {
                //   this.$router.push({
                //     path: this.redirect || "/"
                //   });
                // });
              })
              .catch(() => {
                this.loading = false;
                this.getCode();
              });
          }
        });
      },

      getConfigure() {
        let configure = {
          available_domain: [], //可用域
          cloud_service_provider: [], //服务商
          storage_type: [], //系统盘类型
          codeList: [], //云服务器规格列表
          czxtList: [], //操作系统列表
          ccList: [], //数据盘类型
          fwcpList: [], //服务型磁盘类型
          wlfwqList: [], //高性能服务器资源类型
          sjkList: [], //数据库类型
          yyaqList: [], //安全产品
          dept: [], //部门列表树结构
        };
        //部门列表树结构
        treeselect({}).then((response) => {
          configure.dept = response.data;
        });
        //可用域
        getDicts("available_domain").then((response) => {
          configure.available_domain = response.data;
        });
        //服务商
        getDicts("cloud_service_provider").then((response) => {
          configure.cloud_service_provider = response.data;
        });
        //盘类型
        serviceByClazz({
          code: "cc",
        }).then((response) => {
          response.data.forEach((item) => {
            if (["FCcc(tykcc)2", "FCcc_ssd", "spycc2"].indexOf(item.code) < 0) {
              configure.storage_type.push(item);
            }
            if (["spycc2"].indexOf(item.code) < 0) {
              configure.ccList.push(item);
            }
            if (
              ["fbscc_wjcc2", "FCcc(tykcc)2", "FCcc_ssd"].indexOf(item.code) < 0
            ) {
              configure.fwcpList.push(item);
            }
          });
        });
        //操作系统
        serviceByClazz({
          code: "czxt",
        }).then((response) => {
          configure.czxtList = response.data;
        });
        //云服务器规格列表
        listByCode("spec_ecs").then((response) => {
          configure.codeList = response.data;
        });
        //高性能服务器资源类型列表
        serviceByClazz({
          code: "wlfwq",
        }).then((response) => {
          configure.wlfwqList = response.data;
        });
        //数据库类型列表
        serviceByClazz({
          code: "sjk",
        }).then((response) => {
          configure.sjkList = response.data;
        });
        //安全产品列表
        serviceByClazz({
          code: "yyaq",
        }).then((response) => {
          configure.yyaqList = response.data;
        });
        setTimeout(() => {
          sessionStorage.setItem("configure", JSON.stringify(configure));
        }, 5000);
      },
    },
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .login {
    // position: relative;
    overflow-y: none;
    box-sizing: border-box;
    width: 100%;
    // min-min-width: 1344px;
    // width: 1920px;

    margin: 0 auto;

    .backgrounds {
      width: 100%;
      min-width: 1344px;
      // width: 1920px;
      margin: 0 auto;
      // height: 2000px;
      // overflow-y: auto;
      overflow-y: none;
      // position: absolute;
      background: rgb(245, 245, 245);

      .nav {
        width: 100%;
        // width: 1920px;
        // height: 64px;
        position: absolute;
        z-index: 9;
        // min-width: 1060px;
        background: rgba($color: #000000, $alpha: 0.4);
        transition: 0.5s;

        // padding: 0 40px;
        .nav-inners {
          // width: 1200px;
          // min-width: 1080px;
          // height: 64px;
          margin: 0 auto;
          line-height: 64px;
          width: 100%;
          display: flex;
          justify-content: space-around;

          .nav-menu {
            display: inline-block;
            vertical-align: middle;
          }

          .clearfix {
            zoom: 1;
          }

          ul.nav-menu>li,
          .nav-login>li {
            float: left;
          }

          ul {
            margin: 0;
            padding: 0;
            letter-spacing: 2px;
          }

          ul>li {
            list-style-type: none;
          }

          ul.nav-menu a {
            color: #fff;
            display: inline-block;
            height: 62px;
            line-height: 62px;
            vertical-align: middle;
            margin: 0 15px;
            font-size: 16px;
            letter-spacing: 2px;
            position: relative;
          }

          .nav-login {
            float: right;
            height: 64px;

            .home-button {
              display: inline-block;
              height: 32px;
              line-height: 32px;
              text-align: center;
              color: #fff;
              border: 1px solid #fff;
              margin: 15px 10px;
              width: 90px;
              font-size: 14px;
              letter-spacing: 2px;
              position: relative;
              transition: all 0.3s;
            }

            .home-button:hover {
              color: #000;
            }

            .home-button:hover:after {
              width: 100%;
            }

            .home-button:after {
              content: "";
              position: absolute;
              z-index: -9;
              left: 0;
              top: 0;
              height: 100%;
              width: 0;
              background-color: #fff;
              transition: all 0.3s;
            }
          }

          ul.nav-menu>li:first-child a {
            margin: 0 20px 0 0;
            color: #fff;
            font-size: 24px;
          }
        }
      }

      .nav:hover {
        background: rgba($color: #000000, $alpha: 0.8);
        cursor: pointer;
      }

      .carousel-inners {
        // position: relative;
        width: 100%;
        position: relative;

        .box {
          width: 100%;
          min-width: 1344px;
          // width: 1920px;
          // width: 100vw;
          height: 930px;
          // height: 100vh;
          margin: 0 auto;

          img {
            width: 100%;
            min-width: 1344px;
            // width: 1920px;
            // width: 100vw;
            height: 930px;
            // height: 100vh;
          }
        }

        .footer-header {
          position: absolute;
          bottom: 25px;
          // width: 1920px;
          width: 100%;
          min-width: 1344px;
          text-align: center;
          // background: url("../assets/icons/footerBanner.png") no-repeat;
          background-size: 100%;
          height: 40px;
          line-height: 40px;
          font-size: 40px;
          letter-spacing: 5px;
          margin: 0 auto;
          color: white;
        }
      }

      .home-center {
        width: 1000px;
        height: 60px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        line-height: 60px;
        display: flex;

        .home-news {
          width: 50%;
          height: 100%;
          position: relative;

          li {
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: left;
            padding: 0 20px;
            font-size: 12px;
            letter-spacing: 2px;
            vertical-align: middle;
            overflow: hidden;

            a {
              img {}

              color: #000;

              span {
                padding-left: 20px;
                color: #000;
              }
            }
          }
        }

        ul li {
          margin: 0;
          padding: 0;
        }

        ul>li {
          list-style: none;
        }
      }

      .home-products {
        padding-top: 80px;

        .text-center {
          font-size: 32px;
          margin: 0 0 30px 0;
          letter-spacing: 5px;
          position: relative;
        }

        .text-center:after {
          content: "";
          position: absolute;
          bottom: -16px;
          left: 50%;
          width: 60px;
          height: 6px;
          transform: translateX(-50%);
          background-color: #25a4f5;
        }

        .ace-view-center {
          // width: 1440px;
        }

        .product-service-title-content {
          margin: 0 auto;
          display: flex;
          flex-flow: wrap;
          padding: 0 240px;
          justify-content: space-around;

          .product-service-title-item {
            width: 200px;

            // height: 200px;
            .product-service-title {
              text-align: center;
              padding: 21px 0 19px;
              cursor: pointer;

              .title-img {
                margin: 0 auto;
                width: 64px;
                height: 64px;
                background-repeat: no-repeat;
                background-position: 0 0;
                background-size: 100%;
                background-position-y: 0;
              }

              .title-desc {
                margin-top: 4px;
                text-align: center;
                font-size: 14px;
                color: #181818;
                line-height: 24px;
                font-weight: 400;
                font-size: 20px;
                margin-bottom: 0;
                transition: color 0.3s ease;
              }

              .title-content-underLine {
                transform: scaleX(0);
                transform-origin: 50% 50%;
                transition: transform 0.3s ease;
                width: 100%;
                margin: 11px auto 0;
                border-bottom: 3px solid #25a4f5;
              }
            }
          }
        }

        .product-service-container {
          width: 100%;
          height: auto;
          background-color: #f4f5f7;
          position: relative;
          overflow: hidden;
          cursor: auto;
          box-sizing: border-box;

          .product-service-content {
            box-sizing: border-box;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 40px 0 48px;
            margin: 0 auto;
            text-align: left;

            .ace-row,
            .ace-row-wrap {
              margin-left: -18px;
              margin-right: -18px;
              display: flex;
              flex-wrap: wrap;
              box-sizing: border-box;

              .ace-col-6 {
                box-sizing: border-box;
                flex: 0 0 25%;
                width: 25%;
                max-width: 25%;
                padding-left: 18px;
                padding-right: 18px;

                .action-card {
                  margin-bottom: 44.5px;

                  .action-card-title {
                    height: 27px;
                    overflow: hidden;

                    .card-title {
                      float: left;
                      font-size: 18px;
                      color: #181818;
                      line-height: 27px;
                      font-weight: 600;
                      margin-right: 9px;
                      cursor: pointer;
                      transition: color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
                    }

                    .card-tips {
                      float: left;
                      margin-top: 2.5px;
                      margin-left: 0;
                      padding: 0 8px;
                      border: 1px solid #25a4f5;
                      border-radius: 2px;
                      font-size: 12px;
                      color: #25a4f5;
                      letter-spacing: 0;
                      text-align: center;
                      line-height: 18px;
                    }
                  }

                  .action-card-desc-content {
                    overflow: hidden;
                    height: 24px;
                    margin-top: 10.8px;

                    .action-card-desc {
                      display: inline-block;
                      font-size: 14px;
                      color: #666;
                      line-height: 24px;
                      height: 24px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    }
                  }
                }
              }

              .ace-col-18 {
                box-sizing: border-box;
                display: flex;
                flex: 0 0 75%;
                width: 75%;
                max-width: 75%;
                flex-flow: wrap;
                padding-left: 18px;
                padding-right: 18px;

                .ace-col-8 {
                  box-sizing: border-box;
                  flex: 0 0 33.33333%;
                  width: 33.33333%;
                  max-width: 33.33333%;

                  .static-card {
                    display: block;
                    height: 83px;

                    .static-card-title {
                      overflow: hidden;
                      height: 27px;

                      .card-title {
                        float: left;
                        font-size: 14px;
                        color: #181818;
                        line-height: 27px;
                        margin-right: 9px;
                        font-weight: 600;
                        transition: color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
                      }

                      .card-tips {
                        float: left;
                        margin-top: 2.5px;
                        margin-left: 0;
                        padding: 0 8px;
                        border: 1px solid #25a4f5;
                        border-radius: 2px;
                        font-size: 12px;
                        color: #25a4f5;
                        letter-spacing: 0;
                        text-align: center;
                        line-height: 18px;
                      }
                    }

                    .static-card-desc-content {
                      overflow: hidden;
                      height: 24px;
                      margin-top: 4px;

                      .static-card-desc {
                        max-width: 333px;
                        display: inline-block;
                        font-size: 14px;
                        color: #666;
                        line-height: 24px;
                        height: 24px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      }
                    }

                    .static-card-tips-content {
                      margin-top: 8px;
                      height: 20px;
                      overflow: hidden;

                      .static-card-tips {
                        float: left;
                        border: 1px solid #bbb;
                        border-radius: 2px;
                        font-size: 12px;
                        color: #999;
                        line-height: 18px;
                        margin-right: 6px;
                        padding: 0 6px;
                      }
                    }
                  }
                }
              }
            }
          }

          .ace-view-center {
            width: 1440px;
          }
        }

        .product-wrap {
          background: white;
          width: 80%;
          margin-left: 10%;
          padding: 40px 0;
          margin-bottom: 40px;

          .product-center {
            .wrap {
              display: flex;

              .item {
                width: 20%;
                margin: 0 2.5%;

                .name {
                  font-size: 20px;
                  border-left: 6px solid #25a4f5;
                  padding-left: 6px;
                  color: #25a4f5;
                }

                .name2 {
                  font-size: 20px;
                }

                span {
                  cursor: pointer;
                }

                .remark {
                  color: #949494;
                  margin-top: 10px;
                  // padding:0 2.5%;
                }
              }
            }
          }

          .product-bottom {
            .wrap {
              display: flex;
              flex-wrap: wrap;
              text-align: center;

              .item {
                width: calc(20% - 2px);
                // margin:30px 2.5% 10px 2.5%;
                border: 1px solid #25a4f5;
                margin: 0 2.5%;
                margin-top: 40px;
                padding: 40px 2%;
                box-shadow: 0px 0px 40px rgba(37, 167, 245, 0.5);
              }

              .item2 {
                width: calc(20% - 2px);
                margin: 0 2.5%;
                border: 1px solid rgb(227, 227, 227);
                padding: 40px 2%;
                margin-top: 40px;
              }

              .remark {
                margin-top: 10px;
              }

              img {
                width: 100px;
                height: 100px;
                margin-top: 20px;
              }

              .detail {
                margin-top: 10px;
                color: #949494;
                height: 146px;
                // line-height: 20px;
                // .detail-btn{
                //   padding: 10px 60px;
                //   border-width: 0;
                //   cursor: pointer;
                //   border: 1px solid white;
                //   border-radius: 4px;
                //   background-color: #25a4f5;
                //   color: white;
                // }
                // .detail-btn2{
                //   padding: 10px 60px;
                //   border-width: 0;
                //   cursor: pointer;
                //   border: 1px solid rgba(227,227,227,0.4);
                //   border-radius: 4px;
                // }
              }
            }
          }
        }
      }

      .home-service {
        color: #fff;
        font-size: 12px;
        // overflow: hidden;
        // width: 1920px;
        width: 100%;
        min-width: 1344px;
        margin: 0 auto;
        position: absolute;
        top: 80px;

        .service_bg {
          margin: 0 auto;
          width: 100%;
          height: 567px;
          overflow: hidden;
          // background: url("../assets/icons/bak.png") no-repeat;
          background-size: 100%;
          background-position: 200% 200%;
          text-align: center;

          .clearfix {
            zoom: 1;
          }

          .service-content {
            width: 80%;
            margin: 0 auto 60px auto !important;

            li {
              float: left;
              width: 33%;
              font-size: 1.16em;
              letter-spacing: 2px;
              list-style: none;

              div {
                width: 230px;
                height: 265px;
                margin: 0 auto;
                background: url("../assets/icons/lifangti.png") no-repeat;

                img {
                  width: 38px;
                  height: 38px;
                  vertical-align: middle;
                  margin-top: 50px;
                  border: none;
                }

                p:first-of-type {
                  font-size: 32px;
                  margin: 10px 0;
                }
              }
            }
          }

          ul {
            margin: 0;
            padding: 0;
            letter-spacing: 2px;
          }
        }

        .map-box {
          padding: 30px 0;
          background-color: #485566;
          width: 100%;
          height: 500px;
          margin: 0 auto;
          position: relative;
        }
      }

      .home-footer {
        background-color: #2a2a2d;
        color: #fff;
        padding-bottom: 20px;
        width: 100%;
        margin: 0 auto;

        .clearfix {
          width: 60%;
          margin: 0 auto;

          .footer-content {
            width: 33.33%;
            text-align: left;
            float: left;

            li {
              cursor: pointer;
              margin: 10px 0;
              font-size: 14px;
              letter-spacing: 2px;
              list-style: none;
            }

            li:hover {
              color: cornflowerblue;
            }
          }

          .footer-content li:first-child {
            margin: 50px 0 30px 0;
            font-size: 16px;
          }
        }
      }

      .clearfix {
        zoom: 1;
      }
    }

    .suspension {
      position: fixed;
      box-sizing: border-box;
      height: 100vh;
      width: 800px;
      right: 0px;
      top: 0px;
      z-index: 99;
      background: rgba($color: #000000, $alpha: 0.8);
      transition: 0.5s ease-in;

      .el-suspension {
        background: url("../assets/icons/20210526170647.jpg") no-repeat;
        background-size: 100%;
        background-position: 60%;

        .BackgroundImg {
          width: 100%;
          height: 322px;
          // background: url("../assets/icons/Data.png") no-repeat;

          // background-color: #00f2fe;
        }

        // margin: 0 30px;
        .login-form {
          border-radius: 6px;
          // background: #ffffff;
          width: 300px;
          // margin-top: 50%;
          // margin-left: 50px;
          // padding: 25px 25px 5px 25px;
          box-sizing: border-box;

          .el-input {
            height: 38px;

            input {
              height: 38px;
            }
          }

          .input-icon {
            height: 39px;
            width: 14px;
            margin-left: 2px;
          }
        }
      }

      .login-tip {
        font-size: 13px;
        text-align: center;
        color: #bfbfbf;
      }

      .login-code {
        width: 33%;
        height: 38px;
        float: right;

        img {
          cursor: pointer;
          vertical-align: middle;
        }
      }
    }
  }

  body::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
    display: none;
  }

  body::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
  }

  body::-webkit-scrollbar-thumb:hover {
    background: #333;
  }

  body::-webkit-scrollbar-corner {
    background: #179a16;
  }

  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
  }

  .el-tooltip__popper {
    max-width: 500px;
  }

  .el-popover {
    max-width: 500px;
  }
</style>